<template>
  <div class="vs-container">
    <section class="bg-linear"
      id="linear">
      <div class="max-w-8xl mx-auto px-4 pt-8 pb-20 sm:px-6 lg:px-4"
        v-if="toolsArr && toolsArr.length > 0">
        <div class="breadcrumbs space-x-2 text-base max-w-7xl mx-auto flex flex-wrap items-center">
          <common-link path="/"
            class="text-gray-1000 hover:text-purple-1200 go-home">
            {{$t('home')}}
          </common-link>
          <svg-icon className="text-gray-1800 text-mini text-slate-400 mx-3"
            iconName='right_outlined'
            v-if="toolsArr && toolsArr[0] && toolsArr[0].categories && toolsArr[0].categories.length>0"></svg-icon>
          <common-link path="/category/:handle"
            :params="{ handle:toolsArr[0].categories[0].handle }"
            class="text-gray-1000 hover:text-purple-1200 go-prev"
            v-if="toolsArr && toolsArr[0] && toolsArr[0].categories && toolsArr[0].categories.length>0">
            {{toolsArr[0].categories[0].name}}
          </common-link>
          <svg-icon className="text-gray-1800 text-mini text-slate-400 mx-3"
            iconName='right_outlined'></svg-icon>
          <common-link path="/alternative/:handle"
            :params="{ handle: toolsArr[0].handle}"
            class="text-gray-1000 hover:text-purple-1200 go-alternative">
            {{selfName}}
          </common-link>
          <svg-icon className="text-gray-1800 text-mini text-slate-400 mx-3"
            iconName='right_outlined'></svg-icon>
          <span class="text-gray-1400 text-base">
            {{$t('vs_breadcrumbs',{selfToolName: selfName, targetToolName: targetName})}}
          </span>
        </div>

        <sponsored-by class="mt-14 mb-4 text-lg text-gray-1000 font-semibold text-center"></sponsored-by>

        <h1 class="title text-center text-gray-1000 break-words font-semibold">
          <span>{{selfName}}</span>
          <em class="text-purple-1300 font-bold">{{$t('vs_vs')}}</em>
          <span>{{targetName}}</span>
        </h1>

        <p class="text-center text-gray-1000 mt-4">{{$t('vs_compare_desc',{selfToolName: selfName, targetToolName: targetName})}}</p>
      </div>
    </section>

    <div class="bg-white"
      v-if="recommendTopList && recommendTopList.length > 0">
      <div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-4 py-5">
        <h3 class="text-26 leading-normal text-purple-1300 font-semibold break-words mb-4">{{$t('recommend_youMayLike')}}</h3>
        <div class="tools grid gap-5 sm:grid-cols-3 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4 mb-5">
          <min-tool v-for="(item, key) in recommendTopList"
            :key="item.handle+'-'+key"
            :isShowPic="false"
            :toolPosIndex="key"
            toolPosition="Top"
            :toolsData="item"
            :lazyLoad="key < 4 ? false : true"
            :isShowTraffic="false"></min-tool>
        </div>
      </div>
    </div>

    <div class="vs-content pt-7 pb-16"
      v-if="toolsArr && toolsArr.length > 0">
      <div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-4">
        <div class="bg-white px-5 py-5 sm:py-8 sm:px-10">
          <h2 class="text-28 text-gray-1000 font-semibold">{{$t('vs_summarize')}}</h2>
          <div class="grid gap-5 sm:gap-14 sm:grid-cols-2 mt-5 sm:mt-8">
            <div class="flex flex-col rounded-md tool-item"
              v-for="(item, key) in toolsArr"
              :key="key">
              <div class="flex-1 w-full">
                <h3 class="tool-name text-purple-1300 font-semibold">{{$t('vs_toolummarize',{toolName: $websiteName(item)})}}</h3>
                <p class="text-base text-gray-1500 leading-7">
                  {{item.description}}
                  <!-- {{ getLocaleText(item.description, item.description_locales) }} -->
                </p>
              </div>
              <p class="flex-shrink-0 w-full mb-5 text-sm mt-7">
                {{$t('vs_landing_page',{toolName: $websiteName(item)})}}
              </p>
              <div class="flex-shrink-0 tool-snapshot w-full flex justify-center rounded-b-md overflow-hidden">
                <common-image class="w-full h-full"
                  :src="item.image ? fSrc(item.image) : 'https://cdn.toolify.ai/default.webp'"
                  :alt="$websiteName(item)"></common-image>
              </div>
            </div>
          </div>
        </div>
        <div class="bg-white mt-6 px-5 py-5 sm:py-8 sm:px-10">
          <h2 class="text-28 text-gray-1000 font-semibold">{{$t('vs_compareDetails')}}</h2>
          <div class="grid gap-tab md:gap-tab sm:grid-cols-2 mt-5 sm:mt-8">
            <compare-vs-detail :toolData="item"
              v-for="(item,key) in toolsArr"
              :toolPosIndex="key"
              :key="key"></compare-vs-detail>
          </div>
        </div>

        <div class="bg-white mt-6 px-5 py-5 sm:py-8 sm:px-10"
          v-if="websiteArr.length >0 && ((websiteArr[0] && websiteArr[0].how_to_use) || (websiteArr[1]  && websiteArr[1].how_to_use))">
          <h2 class="text-28 text-gray-1000 font-semibold">{{$t('vs_comparisonOfUsage')}}</h2>
          <div class="grid gap-tab md:gap-tab sm:grid-cols-2 mt-5 sm:mt-8">
            <compare-vs-how-to-use :toolData="item"
              :website="websiteArr[key]"
              v-for="(item,key) in toolsArr"
              :key="key"></compare-vs-how-to-use>
          </div>
        </div>

        <div class="bg-white mt-6 px-5 py-5 sm:py-8 sm:px-10"
          v-if="websiteArr.length >0 && ((websiteArr[0] && websiteArr[0].core_features && websiteArr[0].core_features.length > 0) || (websiteArr[1] && websiteArr[1].core_features && websiteArr[1].core_features.length > 0))">
          <h2 class="text-28 text-gray-1000 font-semibold">{{$t('vs_compareProsBetween',{selfToolName:selfName,targetToolName:targetName})}}</h2>
          <div class="grid gap-tab md:gap-tab sm:grid-cols-2 mt-5 sm:mt-8">
            <compare-vs-pros-between :toolData="item"
              :website="websiteArr[key]"
              v-for="(item,key) in toolsArr"
              :key="key"></compare-vs-pros-between>
          </div>
        </div>

        <div class="bg-white mt-6 px-5 py-5 sm:py-8 sm:px-10"
          v-if="websiteArr.length > 0 && ((websiteArr[0] && websiteArr[0].use_cases && websiteArr[0].use_cases.length > 0) || (websiteArr[1] && websiteArr[1].use_cases && websiteArr[1].use_cases.length > 0))">
          <h2 class="text-28 text-gray-1000 font-semibold">{{$t('vs_compareUseCases')}}</h2>
          <div class="grid gap-tab md:gap-tab sm:grid-cols-2 mt-5 sm:mt-8">
            <compare-vs-use-cases :toolData="item"
              :website="websiteArr[key]"
              v-for="(item,key) in toolsArr"
              :key="key"></compare-vs-use-cases>
          </div>
        </div>

        <div class="bg-white mt-6 px-5 py-5 sm:py-8 sm:px-10"
          v-if="websiteArr.length > 0 && ((websiteArr[0] && websiteArr[0].pricing && websiteArr[0].pricing.length > 0) || (websiteArr[1] && websiteArr[1].pricing && websiteArr[1].pricing.length > 0))">
          <h2 class="text-28 text-gray-1000 font-semibold">{{$t('vs_differentPlanBetween',{selfToolName:selfName,targetToolName:targetName})}}</h2>
          <div class="grid gap-tab md:gap-tab sm:grid-cols-2 mt-5 sm:mt-8">
            <compare-vs-different-plan-between :toolData="item"
              :website="websiteArr[key]"
              v-for="(item,key) in toolsArr"
              :key="key"></compare-vs-different-plan-between>
          </div>
        </div>

        <div class="bg-white mt-6 px-5 py-5 sm:py-8 sm:px-10"
          v-if="toolsArr.length ===2 && toolsArr[0] && toolsArr[1] && ((toolsArr[0].prices && toolsArr[0].prices.length > 0)  || (toolsArr[1].prices && toolsArr[1].prices.length > 0))">
          <h2 class="text-28 text-gray-1000 font-semibold">{{$t('vs_comparePricing')}}</h2>
          <div class="grid gap-tab md:gap-tab sm:grid-cols-2 mt-5 sm:mt-8">
            <compare-vs-pricing :toolData="item"
              v-for="(item,key) in toolsArr"
              :key="key"></compare-vs-pricing>
          </div>
        </div>

        <div class="bg-white mt-5 px-10 py-10 rounded-md"
          v-if="toolsArr && (trafficArr[0] || trafficArr[1])">
          <div class="text-28 text-gray-1000 font-semibold">
            {{$t('vs_compareTrafficMonthlyVisitors')}}
          </div>
          <div class="grid gap-tab md:gap-tab sm:grid-cols-2 mt-5 sm:mt-8"
            v-if="toolsArr && ((trafficArr[0] && trafficArr[0].engagments) || (trafficArr[1] && trafficArr[1].engagments))">
            <compare-vs-pros-cons v-for="(item,key) in toolsArr"
              :toolsTraffic="trafficArr[key]"
              :toolData="item"
              :key="key"></compare-vs-pros-cons>
          </div>

          <div class="grid gap-tab md:gap-tab sm:grid-cols-2 mt-12"
            v-if="toolsArr && ((trafficArr[0] && trafficArr[0].top_country_shares && trafficArr[0].top_country_shares.length >0) || (trafficArr[1] && trafficArr[1].top_country_shares && trafficArr[1].top_country_shares.length >0))">
            <compare-vs-geography v-for="(item,key) in toolsArr"
              :toolsTraffic="trafficArr[key]"
              :toolData="item"
              :key="key"></compare-vs-geography>
          </div>

          <div class="grid gap-tab md:gap-tab sm:grid-cols-2 mt-12"
            v-if="toolsArr && ((trafficArr[0] && trafficArr[0].echartRing && trafficArr[0].echartRing.data && Array.isArray(trafficArr[0].echartRing.data)) || (trafficArr[1] && trafficArr[1].echartRing && trafficArr[1].echartRing.data && Array.isArray(trafficArr[1].echartRing.data)))">
            <compare-vs-traffic-sources v-for="(item,key) in toolsArr"
              :toolsTraffic="trafficArr[key]"
              :toolData="item"
              :key="key"></compare-vs-traffic-sources>
          </div>
        </div>

        <div class="bg-white px-10 py-10 rounded-md mt-10 sm:mt-25">
          <h2 class="text-22 leading-7 text-gray-1000 font-semibold">{{$t('vs_whichIsBetter',{selfToolName:selfName,targetToolName:targetName})}}</h2>
          <p class="text-base text-gray-1500 leading-7 mt-5">
            {{$t('vs_compare_desc01',{betterToolName:Number(toolsArr[0].month_visited_count) > Number(toolsArr[1].month_visited_count)?selfName:targetName,notBettotToolName:Number(toolsArr[0].month_visited_count) > Number(toolsArr[1].month_visited_count)?targetName:selfName,selfToolName:selfName,targetToolName:targetName, lMonthlyVisitsData:$options.filters['vReset'](Number(toolsArr[0].month_visited_count)),rMonthlyVisitsData:$options.filters['vReset'](Number(toolsArr[1].month_visited_count))})}}
          </p>
          <p class="text-base text-gray-1500 leading-7 mt-5"
            v-if="trafficArr[0] && trafficArr[1] && trafficArr[0].engagments && trafficArr[1].engagments">
            {{$t('vs_compare_desc02',{selfToolName:selfName,targetToolName:targetName,
              lAvgVisitDurationData: $options.filters['formatTimeDuration'](Number(trafficArr[0].engagments.time_on_site)),lPagePerVisit:Number(trafficArr[0].engagments.page_per_visit).toFixed(2),lBounceRate:`${Number(trafficArr[0].engagments.bounce_rate * 100).toFixed(2)}%`,
              rAvgVisitDurationData: $options.filters['formatTimeDuration'](Number(trafficArr[1].engagments.time_on_site)),rPagePerVisit:Number(trafficArr[1].engagments.page_per_visit).toFixed(2),rBounceRate:`${Number(trafficArr[1].engagments.bounce_rate * 100).toFixed(2)}%`})}}
          </p>
          <p class="text-base text-gray-1500 leading-7 mt-5"
            v-if="trafficArr[0] && trafficArr[0].countrysText">
            {{$t('vs_compare_desc03',{selfToolName:selfName, countrys:trafficArr[0].countrysText,countryData: trafficArr[0].countryDataText})}}
          </p>
          <p class="text-base text-gray-1500 leading-7 mt-5"
            v-if="trafficArr[1] && trafficArr[1].countrysText">
            {{$t('vs_compare_desc04',{targetToolName:targetName, countrys:trafficArr[1].countrysText,countryData: trafficArr[1].countryDataText})}}
          </p>
        </div>

        <h2 class="mt-10 text-22 leading-7 text-gray-1000 font-semibold">
          {{$t('vs_seeOtherComparisons')}}
        </h2>

        <div class="vs-list mt-7 grid gap-y-4 gap-3 sm:grid-cols-2 lg:grid-cols-4"
          v-if="other_comparisons && other_comparisons !== null && other_comparisons.length > 0">
          <common-link path="/compare/:handle"
            target="_blank"
            :params="{'handle': `${toolsArr[0].handle}-vs-${item.handle}`}"
            v-for="(item, key) in other_comparisons"
            :key="`${item.handle}-${key}`"
            class="text-lg text-gray-1000 border-gray-2000 bg-white border rounded-md text-center px-5 py-4 truncate  hover:text-purple-1300 hover:border-purple-1300 hover:underline go-comparisons-link">
            {{ selfName }} {{$t('vs_vs')}} {{ $websiteName(item) }}
          </common-link>
        </div>
      </div>
    </div>

    <div class="bg-white"
      v-if="recommendBottomList && recommendBottomList.length > 0">
      <div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-4 py-5">
        <h3 class="text-26 leading-normal text-purple-1300 font-semibold break-words mb-4">{{$t('recommend_mostPeopleLike')}}</h3>
        <div class="tools grid gap-5 sm:grid-cols-3 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4 mb-5">
          <min-tool v-for="(item, key) in recommendBottomList"
            :key="item.handle+'-'+key"
            :toolPosIndex="key"
            toolPosition="Bottom"
            :toolsData="item"></min-tool>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Compare',
  head() {
    return {
      htmlAttrs: {
        lang: this.locale,
      },
      title: this.title,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: this.description,
        },
        {
          hid: 'og:title',
          name: 'og:title',
          content: this.title,
        },
        {
          hid: 'og:description',
          name: 'og:description',
          content: this.description,
        },
        {
          hid: 'og:url',
          name: 'og:url',
          content: this.canonicalLink,
        },
        {
          hid: 'og:image:alt',
          name: 'og:image:alt',
          content: this.title,
        },
      ],
      link: [
        {
          rel: 'canonical',
          href: this.canonicalLink,
        },
      ],
    }
  },
  async asyncData({ app, route, params, $axiosApi, error, store }) {
    if (process.server) {
    }
    let date = new Date()
    let fullYear = date.getFullYear()
    let handle = params.handle
    let handleArr = handle.split('-vs-')
    let self = handleArr[0]
    let target = handleArr[1]
    try {
      let [toolsRes, recommendRes] = await Promise.all([
        $axiosApi.getToolkitsVs({
          self_handle: encodeURIComponent(self),
          target_handle: encodeURIComponent(target),
        }),
        $axiosApi.searchGetAd({
          limit: 9,
        }),
      ])

      let other_comparisons
      let toolsArr = []
      let toolsTrafficArr = []
      let websiteArr = []
      let description, title

      let selfName = ''
      let targetName = ''

      if (toolsRes.code === 200) {
        other_comparisons = toolsRes.data.other_comparisons
        toolsArr.push(toolsRes.data.self)
        toolsArr.push(toolsRes.data.target)
        toolsTrafficArr.push(toolsRes.data.self_traffic)
        toolsTrafficArr.push(toolsRes.data.target_traffic)
        websiteArr.push(toolsRes.data.self_website)
        websiteArr.push(toolsRes.data.target_website)

        function websiteName(tool) {
          let toolName = tool.name
          if (tool.website && tool.website && tool.website.name) {
            toolName = tool.website.name
          }
          return toolName
        }

        if (toolsRes.data.self) {
          selfName = websiteName(toolsRes.data.self)
        }

        if (toolsRes.data.target) {
          targetName = websiteName(toolsRes.data.target)
        }

        if (selfName && targetName) {
          title = app.i18n.t('vs_tabTitle', {
            selfToolName: selfName,
            targetToolName: targetName,
          })
          description = app.i18n.t('vs_tabDesc', {
            selfToolName: selfName,
            targetToolName: targetName,
          })
        }
      } else {
        if (toolsRes && toolsRes.code && toolsRes.code === 404) {
          error({ statusCode: 404 })
        } else if (!(toolsRes && toolsRes.code && toolsRes.code === 401)) {
          error({
            message:
              'There is a problem with the network. Please refresh and try again later',
            statusCode: toolsRes.code,
          })
        }
      }

      let recommendTopList = []
      let recommendBottomList = []
      if (
        recommendRes.code === 200 &&
        recommendRes.data &&
        recommendRes.data.featured_list &&
        recommendRes.data.featured_list.length > 0
      ) {
        store.commit(
          'SET_TOP_ADVERTISER',
          JSON.parse(JSON.stringify(recommendRes.data.featured_list[0]))
        )
        recommendTopList = recommendRes.data.featured_list.slice(0, 4)
        recommendBottomList = recommendRes.data.featured_list.slice(4, 8)
      } else {
        store.commit('SET_TOP_ADVERTISER', null)
      }

      return {
        other_comparisons,
        toolsArr,
        toolsTrafficArr,
        websiteArr,
        title,
        description,
        fullYear,
        recommendTopList,
        recommendBottomList,
        selfName,
        targetName,
      }
    } catch (err) {
      console.log(err)
    }
  },
  filters: {
    vReset: function (val) {
      if (typeof val === 'number' && !isNaN(val)) {
        if (val <= 1000) {
          return val
        } else if (val > 1000 && val < 1000000) {
          return (val / 1000).toFixed(1) + 'K'
        } else if (val >= 1000000 && val < 1000000000) {
          return (val / 1000000).toFixed(1) + 'M'
        } else {
          return (val / 1000000000).toFixed(1) + 'B'
        }
      } else {
        return val
      }
    },
    vResetVisit: function (val) {
      if (typeof val === 'number' && !isNaN(val)) {
        if (val < 5000) {
          return '< 5K'
        } else if (val >= 5000 && val < 1000000) {
          return (val / 1000).toFixed(1) + 'K'
        } else if (val >= 1000000 && val < 1000000000) {
          return (val / 1000000).toFixed(1) + 'M'
        } else {
          return (val / 1000000000).toFixed(1) + 'B'
        }
      } else {
        return '< 5K'
      }
    },
    formatTimeDuration: function (msTime) {
      //毫秒转换成时分秒展示
      let time = msTime
      let hour = Math.floor(time / 60 / 60)
      hour = hour.toString().padStart(2, '0')
      let minute = Math.floor(time / 60) % 60
      minute = minute.toString().padStart(2, '0')
      let second = Math.floor(time) % 60
      second = second.toString().padStart(2, '0')
      return `${hour}:${minute}:${second}`
    },
    fLabel: function (val, options) {
      let obj = options.find((item) => {
        return val.toLowerCase() === item.value.toLowerCase()
      })
      if (obj && obj.label) {
        return obj.label
      } else {
        return val
      }
    },
  },
  computed: {
    ...mapState({
      locale: (state) => state.locale,
      countries: (state) => state.countries,
    }),
    trafficArr() {
      let arr = JSON.parse(JSON.stringify(this.toolsTrafficArr))
      if (this.toolsTrafficArr && this.toolsTrafficArr.length > 0) {
        let ringObj = {
          colors: [
            '#FF5384',
            '#1E75FF',
            '#0DD6F7',
            '#F9C019',
            '#08C87C',
            '#11A683',
          ],
          colorsObj: {
            Direct: '#FF5384',
            Mail: '#1E75FF',
            'Paid Referrals': '#0DD6F7',
            Referrals: '#F9C019',
            Search: '#08C87C',
            Social: '#11A683',
          },
          total: 0,
          data: {},
        }
        arr.forEach((aiItem) => {
          if (aiItem) {
            let total = 0
            aiItem.echartRing = JSON.parse(JSON.stringify(ringObj))
            if (aiItem.traffic_sources) {
              for (let key in aiItem.traffic_sources) {
                if (aiItem.traffic_sources[key] === null) {
                  aiItem.traffic_sources[key] = 0
                }
                total = total + aiItem.traffic_sources[key]
              }
              aiItem.echartRing.total = total

              let arr = []
              for (let key in aiItem.traffic_sources) {
                arr.push({
                  labelKey: key,
                  label: this.fI18n(`vs_sources${key}`),
                  value: aiItem.traffic_sources[key],
                })
              }
              aiItem.echartRing.data = arr.sort((a, b) => {
                return b.value - a.value
              })
            }
            aiItem.estimatedMonthlyVisits = aiItem.estimated_monthly_visits
            aiItem.estimatedMonthlyVisitsList =
              aiItem.estimated_monthly_visits_list
            aiItem.engagments = aiItem.engagments ? aiItem.engagments : null
            aiItem.countrysText = ''
            aiItem.countryDataText = ''
            aiItem.top_country_shares.forEach((dItem) => {
              aiItem.countrysText = `${aiItem.countrysText}${
                aiItem.countrysText ? ', ' : ''
              }${this.$options.filters['fLabel'](
                dItem.two_code,
                this.countries
              )}`
              aiItem.countryDataText = `${aiItem.countryDataText}${
                aiItem.countryDataText ? ', ' : ''
              }${Number(dItem.value * 100).toFixed(2)}%`
            })
            aiItem.dataRange = []
            if (
              aiItem &&
              aiItem.estimated_monthly_visits_list &&
              aiItem.estimated_monthly_visits_list.length > 2
            ) {
              aiItem.dataRange.push(
                this.formattedDate(aiItem.estimated_monthly_visits_list[0].date)
              )
              aiItem.dataRange.push(
                this.formattedDate(
                  aiItem.estimated_monthly_visits_list[
                    aiItem.estimated_monthly_visits_list.length - 1
                  ].date
                )
              )
            }
          }
        })
        return arr
      } else {
        return [null, null]
      }
    },
  },
  watch: {
    $route: {
      handler(route) {
        if (route.name === this.$route.name) {
        }
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      canonicalLink: `https://www.toolify.ai${this.$route.fullPath}`,
      recommendTopList: [],
      recommendBottomList: [],
      errorImage: require('@/static/images/default.webp'),
      loading: false,

      other_comparisons: null,
      toolsArr: [],
      toolsTrafficArr: [],
      websiteArr: [],
      fullYear: null,
      title: null,
      description: null,

      comparisons: null,

      selfName: '',
      targetName: '',
    }
  },
  methods: {
    fI18n(arg) {
      const hasKey = this.$i18n.t(arg)
      if (hasKey) {
        const result = this.$i18n.t(arg)
        return result
      }
      return arg
    },
    getLocaleText(val, val_locales) {
      if (
        Object.prototype.toString.call(val_locales) === '[object Object]' &&
        typeof val_locales[this.locale] != 'undefined' &&
        val_locales[this.locale] !== null &&
        val_locales[this.locale] !== ''
      ) {
        return val_locales[this.locale]
      } else {
        return val
      }
    },
    fSrc(val) {
      let iSrc
      if (val) {
        iSrc = val
        if (iSrc.indexOf('x-oss-process') === -1) {
          iSrc = `${iSrc}${
            iSrc.indexOf('?') === -1 ? '?' : '&'
          }x-oss-process=image/resize,l_1000,m_lfit`
        }
        if (
          iSrc.indexOf('https://nav-station.oss-accelerate.aliyuncs.com') >= 0
        ) {
          iSrc = iSrc.replace(
            'https://nav-station.oss-accelerate.aliyuncs.com',
            'https://cdn-images.toolify.ai'
          )
        }
        return iSrc
      } else {
        return val
      }
    },
    formattedDate: function (val) {
      let values = ''
      if (val) {
        let monthArray = [
          'Jan',
          'Feb',
          'Mar',
          'Apr',
          'May',
          'Jun',
          'Jul',
          'Aug',
          'Sep',
          'Oct',
          'Nov',
          'Dec',
        ]

        let sDateArry = val.split('-')

        let sMonth = monthArray[parseInt(sDateArry[1] - 1)]
        values = sMonth + ' ' + sDateArry[0]
        return values
      } else {
        return ''
      }
    },
  },
}
</script>
<style lang='scss' scoped>
.vs-container {
  background-color: #fafafa;
  .title {
    font-size: 62px;
    line-height: 76px;
    em {
      margin: 0 10px;
    }
  }

  .tool-item {
    .tool-name {
      font-size: 22px;
      line-height: 28px;
      margin-bottom: 18px;
    }
    .tool-snapshot {
      height: 308px;
    }
  }
  .gap-tab {
    gap: 50px !important;
  }

  .vs-table {
    tr {
      &:nth-child(even) {
        background: #f8f9fb;
      }
      td:last-child {
        border-left: 1px solid #e5e5e5;
      }
    }
  }

  .traffic-title {
    position: relative;
    font-size: 20px;
    color: #191919;
    line-height: 24px;
    padding-left: 15px;
    &::after {
      position: absolute;
      content: '';
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 3px;
      height: 24px;
      background: #8333c2;
      border-radius: 1px;
    }
  }
}
@media (min-width: 768px) {
  .vs-container {
    .md\:gap-tab {
      gap: 100px !important;
    }
  }
}
</style>
